<template>
  <div id="main" style="width: 700px; height: 550px">
    图表2,pie图来显示消费占比
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      datainit();
    });

    const datainit = () => {
      let url = "/api/continent";
      axios.get(url).then((res) => {
        console.log(res);
        let data = res.data;
        console.log(data);
        init(data);
      });
    };
    const init = (data) => {
      var option = {
        title: {
          text: "七大州的消费占比",
        },
        series: {
          type: "pie",
          data: data,
          label: {
            formatter: "{b} {d}%",
          },
        },
      };
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
    };
  },
};
</script>

<style></style>